<template>    
    <el-container>
        <el-header style="padding-top: 20px;">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :click="backHome">主页面</el-breadcrumb-item>
                <el-breadcrumb-item>{{page.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="日志名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="日志代码" prop="code">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item label="日志类型" prop="type" style="text-align: left;">
                    <el-select v-model="form.type" placeholder="请选择">
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item style="text-align: left;">
                <el-form-item label="日志已结束" style="text-align: left;">
                    <el-switch
                        v-model="form.end_mk"
                        >
                    </el-switch>
                </el-form-item>       
                <el-form-item label="日志起始日期" style="text-align: left;">
                    <el-date-picker
                        v-model="form.sta_date" 
                        align="left"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions1">
                    </el-date-picker>
                </el-form-item> 
                <el-form-item label="日志结束日期" style="text-align: left;">
                    <el-date-picker
                        v-model="form.end_date" 
                        align="left"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions1">
                    </el-date-picker>
                </el-form-item>              
                <el-form-item label="日志简介" prop="intro">
                    <el-input :rows="2" type="textarea" v-model="form.intro"></el-input>
                </el-form-item>
                <el-form-item label="日志项目说明">
                    <el-input
                        :rows="5"
                        type="textarea" v-model="form.detail">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>
<script>
    export default {
        // 父子组件传值
        props: ['centerRouter'],
        data(){
            return {
                form:{
                    name : '',
                    code : '',
                    intro : '',
                    detail : '',
                    end_mk: '',
                    type: '',
                    sta_date: '',
                    end_date: ''
                },
                rules: {
                    name: [{ required: true, message: '请输入日志名称', trigger: 'blur' }],
                    code: [{ required: true, message: '请输入日志代码', trigger: 'blur' }],
                    intro: [{ required: true, message: '请输入日志简介', trigger: 'blur' }],
                    type: [{ required: true, message: '请选择日志类型', trigger: 'blur' }]
                },
                typeOptions: [
                    {value: 'D1', label: '按天分组'},
                    {value: 'M1', label: '按月分组'},
                    {value: 'Y1', label: '按年分组'}
                ],
                pickerOptions1: {
                    // disabledDate(time) {
                    //     return time.getTime() > Date.now();
                    // },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                        picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                        }
                    }]
                },
                page: {
                    name: '新增数据',
                    bind: this.centerRouter         // 注册为局部变量
                }
            }
        },
        created() {
            // 值改变监听
            this.$watch("centerRouter", (nVal, oVal) => {
                var id = nVal.bind.id || false
                if(id){
                    this.$c.PigeonsGet('aurora/ulog/info',{id: id}, (reuslt) => {
                        if(200 == reuslt.code){
                            this.form = reuslt.record;
                        }
                    })
                }else{
                    this.$refs.form.resetFields()
                }
            })
        },
        mounted(){
            console.log(this.centerRouter, '父子传值测试-mounted')
            var bind = this.centerRouter.bind;
            if(bind.name){
                this.page.name = bind.name;
            }
            // 对象初始化时调用函数
            // 获取数据
            if(bind.id){
                this.$c.PigeonsGet('aurora/ulog/info',{id: bind.id}, (reuslt) => {
                    if(200 == reuslt.code){
                        this.form = reuslt.record;
                    }
                });
            }
        },
        methods:{
            // 提交表单
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        var savedata = this.$refs.form.model;
                        //console.log(savedata)
                        var id = this.$c.getQuery('index');
                        if(id){
                            savedata.id = id;
                        }
                        this.$c.PigeonsPost('aurora/ulog/add',savedata, (result) => {
                            if(result.code == 200){
                                this.$message({
                                    showClose: true,
                                    message: result.msg,
                                    type: 'success'
                                });
                                if(!id){
                                    this.$refs.form.resetFields();
                                }
                            }else{
                                this.$message({
                                    showClose: true,
                                    message: result.msg,
                                    type: 'error'
                                });
                            }
                        }
                        , (eImg) => {
                            this.$message({
                                showClose: true,
                                message: eImg,
                                type: 'error'
                            });
                        }
                    )
                    } else {
                        return false
                    }
                });
            },
            // 重置表单
            onReset(){
                this.$refs.form.resetFields()
            },
            backHome(){
                console.log(8)
            }
        }
    }
</script>